<template>
    <div class="myPublish-container">
        <!-- 面包屑 -->
        <Breadcrumb>
            <BreadcrumbItem to="/userHome">个人中心</BreadcrumbItem>
            <BreadcrumbItem>求购管理</BreadcrumbItem>
        </Breadcrumb>
        <div class="myPublish-info">
            <Tabs value="name1">
                <!-- 我的发布列表 -->
                <TabPane label="我的发布" name="name1">
                    <div class="hasMsg" v-if="goodsList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <div class="hasMsg" v-else>
                        <div class="myPublish-list">
                            <div class="myPublish-item" v-for="item in goodsList" :key="item.wgId">
                                <div class="item-left">
                                    <router-link :to="'/wantGoodsInfo/' + item.wgId"><img :src="item.mainPic" alt=""></router-link>
                                    <div class="goodsinfo">
                                        <router-link :to="'/wantGoodsInfo/' + item.wgId" class="goods-title">{{item.wgTitle}}</router-link>
                                        <p>
                                            <span class="create-type">{{item.wgMode}}</span>
                                            <span class="list-type"><Icon type="ios-eye" /> {{item.wgViewNum}}</span>
                                            <span class="list-type">
                                                <Icon type="ios-chatbubbles" /> 回复数
                                            </span>
                                            <span class="list-type">
                                                <router-link :to="'/updateWantGoods/' + item.wgId" class="edit">
                                                <Icon type="md-create" /> 编辑</router-link>
                                            </span>
                                            <span class="list-type">
                                                <a-popconfirm
                                                    title="确认删除？"
                                                    @confirm="deleteById(item.wgId)"
                                                    okText="Yes"
                                                    cancelText="No">
                                                    <a href="javascript:void(0)" class="delete"><Icon type="ios-trash-outline" /> 删除</a>
                                                </a-popconfirm>
                                            </span>
                                            <span class="list-type">
                                                <a-popconfirm
                                                    title="确认下架？"
                                                    @confirm="shelveById(item.wgId)"
                                                    okText="Yes"
                                                    cancelText="No">
                                                    <a href="javascript:void(0)" class="shelf"><Icon type="ios-umbrella-outline" /> 下架</a>
                                                </a-popconfirm>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                                <div class="item-right">
                                    <span class="price">￥{{item.wgPrice}}</span>
                                    <span>{{item.wgCreateTime | dataFormat}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="page-all">
                            <Page :total="allPages.total" :page-size="pageSize" :current="pageNumOne" @on-change="changePage"  />
                        </div>
                    </div>
                </TabPane>
                <!-- 下架求购列表 -->
                <TabPane label="下架求购" name="name2">
                    <div class="hasMsg" v-if="shelfList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <div class="hasMsg" v-else>
                        <div class="myPublish-list">
                            <div class="myPublish-item" v-for="item in shelfList" :key="item.wgId">
                                <div class="item-left">
                                    <router-link :to="'/wantGoodsInfo/' + item.wgId"><img :src="item.mainPic" alt=""></router-link>
                                    <div class="goodsinfo">
                                        <router-link :to="'/wantGoodsInfo/' + item.wgId" class="goods-title">{{item.wgTitle}}</router-link>
                                        <p>
                                            <span class="create-type">{{item.wgMode}}</span>
                                            <span class="list-type"><Icon type="ios-eye" /> {{item.wgViewNum}}</span>
                                            <span class="list-type">
                                                <Icon type="ios-chatbubbles" /> 回复数
                                            </span>
                                            <span class="list-type">
                                                <a-popconfirm
                                                    title="确认删除？"
                                                    @confirm="deleteById(item.wgId)"
                                                    okText="Yes"
                                                    cancelText="No">
                                                    <a href="javascript:void(0)" class="delete"><Icon type="ios-trash-outline" /> 删除</a>
                                                </a-popconfirm>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                                <div class="item-right">
                                    <span class="price">￥{{item.wgPrice}}</span>
                                    <span>
                                        <a-popconfirm
                                            title="确认上架？"
                                            @confirm="cancelShelveById(item.wgId)"
                                            okText="Yes"
                                            cancelText="No">
                                            <a href="javascript:void(0)" class="edit">重新发布</a>
                                        </a-popconfirm>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="page-all">
                            <Page :total="allShelfPages.total" :page-size="pageSize" :current="pageNumTwo" @on-change="changeShelfPage"  />
                        </div>
                    </div>
                </TabPane>
                <!-- 审核求购列表 -->
                <TabPane label="审核求购" name="name3">
                    <!-- 审核中商品列表 -->
                    <div class="verigyIng">
                        <div class="hasMsg" v-if="verifyIngList==''">
                            <div class="top-info">
                                <span>审核中</span>
                            </div>
                            <a-empty style="padding-top:70px;"></a-empty>
                        </div>
                        <div class="hasMsg" v-else>
                            <div class="top-info">
                                <span>审核中</span>
                            </div>
                            <div class="myPublish-list">
                                <div class="myPublish-item" v-for="item in verifyIngList" :key="item.wgId">
                                    <div class="item-left">
                                        <router-link :to="'/wantGoodsInfo/' + item.wgId"><img :src="item.mainPic" alt=""></router-link>
                                        <div class="goodsinfo">
                                            <router-link :to="'/wantGoodsInfo/' + item.wgId" class="goods-title">{{item.wgTitle}}
                                            </router-link>
                                            <p>
                                                <span class="create-type">{{item.wgMode}}</span>
                                                <span class="list-type"><Icon type="ios-eye" /> {{item.wgViewNum}}</span>
                                                <span class="list-type">
                                                    <a-popconfirm
                                                        title="确认删除？"
                                                        @confirm="deleteById(item.wgId)"
                                                        okText="Yes"
                                                        cancelText="No">
                                                        <a href="javascript:void(0)" class="delete"><Icon type="ios-trash-outline" /> 删除</a>
                                                    </a-popconfirm>
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="item-right">
                                        <span class="price">￥{{item.wgPrice}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="page-all">
                                <Page :total="verifyIngPages.total" :page-size="pageSize" :current="pageNumThree"
                                @on-change="changeVerifyPage" />
                            </div>
                        </div>
                    </div>
                    <!-- 审核失败商品列表 -->
                    <div class="dieVerify">
                        <div class="hasMsg" v-if="dieVerifyList==''">
                            <div class="top-info">
                                <span>审核失败</span>
                            </div>
                            <a-empty style="padding-top:70px;"></a-empty>
                        </div>
                        <div class="hasMsg" v-else>
                            <div class="top-info">
                                <span>审核失败</span>
                            </div>
                            <div class="myPublish-list">
                                <div class="myPublish-item" v-for="item in dieVerifyList" :key="item.wgId">
                                    <div class="item-left">
                                        <router-link :to="'/wantGoodsInfo/' + item.wgId"><img :src="item.mainPic" alt="">
                                        </router-link>
                                        <div class="goodsinfo">
                                            <router-link :to="'/wantGoodsInfo/' + item.wgId" class="goods-title">{{item.wgTitle}}
                                            </router-link>
                                            <p>
                                                <span class="create-type">{{item.wgMode}}</span>
                                                <span class="list-type"><Icon type="ios-eye" /> {{item.wgViewNum}}</span>
                                                <span class="list-type">
                                                    <a-popconfirm
                                                        title="确认删除？"
                                                        @confirm="deleteById(item.wgId)"
                                                        okText="Yes"
                                                        cancelText="No">
                                                        <a href="javascript:void(0)" class="delete"><Icon type="ios-trash-outline" /> 删除</a>
                                                    </a-popconfirm>
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="item-right">
                                        <span class="price">￥{{item.wgPrice}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="page-all">
                                <Page :total="dieVerifyPages.total" :page-size="pageSize"
                                :current="pageNumFour" @on-change="changeDieVerifyPages"/>
                            </div>
                        </div>
                    </div>
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>

<script>
export default {
    name: 'myWants',
    data() {
        return {
            uId: JSON.parse(localStorage.getItem('user')).uId,
            pageSize: 4, // 每页显示多少条
            allPages: [], // 存放求购商品分页的信息
            pageNumOne: 1, // 默认展示第一页数据
            pageNumTwo: 1, // 默认展示第一页数据
            pageNumThree: 1, // 默认展示第一页数据
            pageNumFour: 1, // 默认展示第一页数据
            goodsList: [], // 审核状态为1正常的求购商品列表
            shelfList: [], // 状态为2下架的求购商品列表
            allShelfPages: [], // 存放下架求购商品分页的信息
            verifyIngList: [], // 状态为0审核中的求购商品列表
            verifyIngPages: [], // 存放审核中求购商品分页的信息
            dieVerifyList: [], // 状态为-1审核失败的求购商品列表
            dieVerifyPages: [], // 存放审核失败求购商品分页的信息
        }
    },
    created() {
        this.findByUserId()
        this.findShelveByUserId()
        this.findVerifyIngByUid()
        this.findDieVerifyByUid()
    },
    methods: {
        // 根据用户id查询此用户发布成功的求购商品列表（所有审核状态为1正常的求购商品）
        findByUserId() {
            this.$axios({
                url: 'wantGoods/findByUserId',
                method: 'get',
                params: {
                    wgUid: this.uId,
                    pageNo: this.pageNumOne,
                    pageSize: this.pageSize,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.goodsList = res.data.pageInfo.list
                    this.allPages = res.data.pageInfo
                    this.goodsList.forEach(item => {
                        if (item.wgMode == 1) {
                            item.wgMode = '求购中'
                        }
                        this.$axios({
                            url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wgId,
                            method: 'get',
                        }).then(res => {
                            if (res.data.code === 200) {
                                // vue给对象新增属性并触发视图更新
                                this.$set(item, 'mainPic', res.data.object.wgpAddress)
                            }
                        }).catch(error => {
                            console.log(error)
                        })
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 分页改变售卖中求购商品页码
        changePage(index) {
            // 加载更多，页码改变的回调，返回改变后的页码
            this.pageNumOne = index
            this.findByUserId()
        },
        // 根据id删除求购商品信息
        deleteById(id) {
            this.$axios({
                url: 'wantGoods/deleteById/' + id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.findByUserId()
                    this.findShelveByUserId()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据id下架此求购商品
        shelveById(id) {
            this.$axios({
                url: 'wantGoods/shelveById/' + id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.findByUserId()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据用户id查询该用户下架的求购商品列表（所有审核状态为2下架的求购商品）
        findShelveByUserId() {
            this.$axios({
                url: 'wantGoods/findShelveByUserId',
                method: 'get',
                params: {
                    wgUid: this.uId,
                    pageNo: this.pageNumTwo,
                    pageSize: this.pageSize,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.shelfList = res.data.pageInfo.list
                    this.allShelfPages = res.data.pageInfo
                    this.shelfList.forEach(item => {
                        if (item.wgMode == 2) {
                            item.wgMode = '已下架'
                        }
                        this.$axios({
                            url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wgId,
                            method: 'get',
                        }).then(res => {
                            if (res.data.code === 200) {
                                // vue给对象新增属性并触发视图更新
                                this.$set(item, 'mainPic', res.data.object.wgpAddress)
                            }
                        }).catch(error => {
                            console.log(error)
                        })
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 分页改变下架求购商品列表页码
        changeShelfPage(index) {
            // 加载更多，页码改变的回调，返回改变后的页码
            this.pageNumTwo = index
            this.findShelveByUserId()
        },
        // 根据id取消被下架的求购商品（上架）
        cancelShelveById(id) {
            this.$axios({
                url: 'wantGoods/cancelShelveById/' + id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.findByUserId()
                    this.findShelveByUserId()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据用户id查询该用户审核中的求购商品列表（所有审核状态为0审核中的求购商品）
        findVerifyIngByUid() {
            this.$axios({
                url: 'wantGoods/findVerifyIngByUid',
                method: 'get',
                params: {
                    wgUid: this.uId,
                    pageNo: this.pageNumThree,
                    pageSize: this.pageSize,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.verifyIngList = res.data.pageInfo.list
                    this.verifyIngPages = res.data.pageInfo
                    this.verifyIngList.forEach(item => {
                        if (item.wgMode == 0) {
                            item.wgMode = '审核中'
                        }
                        this.$axios({
                            url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wgId,
                            method: 'get',
                        }).then(res => {
                            if (res.data.code === 200) {
                                // vue给对象新增属性并触发视图更新
                                this.$set(item, 'mainPic', res.data.object.wgpAddress)
                            }
                        }).catch(error => {
                            console.log(error)
                        })
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 分页改变审核中求购商品列表页码
        changeVerifyPage(index) {
            // 加载更多，页码改变的回调，返回改变后的页码
            this.pageNumThree = index
            this.findVerifyIngByUid()
        },
        // 根据用户id查询该用户审核中的求购商品列表（所有审核状态为0审核中的商品）
        findDieVerifyByUid() {
            this.$axios({
                url: 'wantGoods/findDieVerifyByUid',
                method: 'get',
                params: {
                    wgUid: this.uId,
                    pageNo: this.pageNumFour,
                    pageSize: this.pageSize,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.dieVerifyList = res.data.pageInfo.list
                    this.dieVerifyPages = res.data.pageInfo
                    this.dieVerifyList.forEach(item => {
                        if (item.wgMode == -1) {
                            item.wgMode = '审核失败'
                        }
                        this.$axios({
                            url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wgId,
                            method: 'get',
                        }).then(res => {
                            if (res.data.code === 200) {
                                // vue给对象新增属性并触发视图更新
                                this.$set(item, 'mainPic', res.data.object.wgpAddress)
                            }
                        }).catch(error => {
                            console.log(error)
                        })
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 分页改变审核失败求购商品列表页码
        changeDieVerifyPages(index) {
            // 加载更多，页码改变的回调，返回改变后的页码
            this.pageNumFour = index
            this.findDieVerifyByUid()
        },
    },
}
</script>

<style scoped>
.top-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: #efefef;
    padding: 4px 10px;
}
.top-info span {
    font-size: 16px;
    font-weight: 400;
}
.page-all{
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.myPublish-container {
    min-height: 480px;
}
.myPublish-info {
    margin-top: 50px;
}
.myPublish-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8eaec;
    padding: 10px;
}
.item-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width:73%;
}
.item-left img {
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 10px;
}
.goodsinfo p {
    margin-bottom: 0;
    font-size: 12px;
}
.goodsinfo {
    max-width:95%;
}
.goodsinfo>a {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 16px;
}
.item-right span {
    display: block;
    color: #515a6e;
    font-size: 12px;
    text-align: center;
}
.item-right .price {
    color: #ef4238;
    font-size: 14px;
}
.create-type {
    margin-right: 10px;
    color: #1890ff;
    background: #eeeeee;
    padding: 1px 2px;
    border-radius: 2px;
}
.list-type {
    margin-right: 10px;
    color: #515a6e;
}
.edit {
    color:#80bd01;
}
.delete {
    color:#ef4238;
}
</style>